<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<%
  request.setAttribute("ctx", request.getContextPath());
%>
<title>SWFUpload+Spring</title>
<link href="${ctx}/css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx}/js/swfupload.js"></script>
<script type="text/javascript" src="${ctx}/js/swfupload.queue.js"></script>
<script type="text/javascript" src="${ctx}/js/fileprogress.js"></script>
<script type="text/javascript" src="${ctx}/js/handlers.js"></script>
<script type="text/javascript" src="${ctx}/js/json2.js"></script>
<script type="text/javascript">
	var swfu, swfu1;

	window.onload = function() {
		var settings = function(){
			this.flash_url ="${ctx}/js/swfupload.swf";    //flash插件路径
			this.upload_url = "${ctx}/file/saveImage";  //提交URL
			this.file_size_limit = "10MB";//上传文件大小限制
			this.file_types = "*.jpg;*.gif;*.png;*.jpeg";   //文件类型  *.jpg;*.gif
			this.file_types_description = "图片文件";    //显示上传文件标识
			this.file_upload_limit = 1;  //上传文件数量限制
			this.file_queue_limit = 0;  //上传文件限制
			this.file_post_name ="image"; //后台接收文件字符串的名称
			//用于安全地存储与SWFUpload实例关联的自定义信息，例如属性和方法，而不用担心跟SWFUpload内部的方法和属性冲突以及版本升级的兼容
			this.debug = false;     //设置debug事件是否被触发

			// Button settings
			this.button_action= 'SELECT_FILE';
			this.button_image_url= "${ctx}/images/TestImageNoText_65x29.png"; //该参数可以设置一个相对于该swf文件或者是绝对地址的图片
			this.button_width = "65";   //显示按钮图标的宽度
			this.button_height = "29";  //显示按钮图标的高度(只会取按钮图片高度的1/4)
			this.button_text ='<span class="theFont">浏览</span>'; //设置Flash Button中显示的文字
			this.button_text_style = ".theFont { font-size: 16; }"; //通过CSS样式来设置Flash Button中的文字样式
			this.button_text_left_padding= 12;  //设置Flash Button上文字距离顶部的距离，可以使用负值
			this.button_text_top_padding = 3;    //设置Flash Button上文字距离左侧的距离，可以使用负值

			// The event handler functions are defined in handlers.js
			/*当文件选择对话框关闭消失时，如果选择的文件成功加入上传队列，那么针对每个成功加入的文件都会触发一次该事件（N个文件成功加入队列，就触发N次此事件）*/
			this.file_queued_handler = fileQueued;   
			//如果选择的文件加入到上传队列中失败，那么针对每个出错的文件都会触发一次该事件
			this.file_queue_error_handler = fileQueueError;
			//当选择文件对话框关闭，并且所有选择文件已经处理完成（加入上传队列成功或者失败）时，此事件被触发
			this.file_dialog_complete_handler = fileDialogComplete;
			//在文件往服务端上传之前触发此事件，可以在这里完成上传前的最后验证以及其他你需要的操作，例如添加、修改、删除post数据等
			this.upload_start_handler = uploadStart;
			//该事件由flash定时触发，提供三个参数分别访问上传文件对象、已上传的字节数，总共的字节数。因此可以在这个事件中来定时更新页面中的UI元素，以达到及时显示上传进度的效果
			this.upload_progress_handler = uploadProgress;
			//无论什么时候，只要上传被终止或者没有成功完成，那么该事件都将被触发
			this.upload_error_handler = uploadError;
			//当文件上传的处理已经完成（这里的完成只是指向目标处理程序发送了Files信息，只管发，不管是否成功接收），并且服务端返回了200的HTTP状态时，触发此事件
			this.upload_success_handler = function(file, serverData){
				var data= JSON.parse(serverData);
				if(data.status=="1"){
					document.getElementById(this.customSettings.tagSpan).innerHTML = "上传成功";
				}else{
					document.getElementById(this.customSettings.tagSpan).innerHTML = "上传失败";
				}
			};
			//当上传队列中的一个文件完成了一个上传周期，无论是成功(uoloadSuccess触发)还是失败(uploadError触发)，此事件都会被触发，这也标志着一个文件的上传完成，可以进行下一个文件的上传了
			this.upload_complete_handler = uploadComplete;
			//上传周期完成，触发此事件，显示本次上传的文件数量  handlers.js文件中定义
			this.queue_complete_handler = queueComplete;
			// Queue plugin event
		};
		
		var set1= new settings();
		set1.post_params= {"PHPSESSID" : "yang1"}; //额外参数的设置
		set1.custom_settings={cancelButtonId : "btnCancel",submitBtnId:"sub",tagSpan:"tagSpan"};
		set1.button_placeholder_id="spanButtonPlaceHolder";
		swfu = new SWFUpload(set1);
		
		var set2= new settings();
		set2.post_params= {"PHPSESSID" : "yang2"}; //额外参数的设置
		set2.custom_settings={cancelButtonId : "btnCancel1",submitBtnId:"sub1",tagSpan:"tagSpan1"};
		set2.button_placeholder_id="spanButtonPlaceHolder1";
		swfu1 = new SWFUpload(set2);
	};
</script>
</head>
<body>
	<div id="header">
		<h1 id="logo"><a href="../">SWFUpload</a></h1>
		<div id="version">v2.2.0</div>
	</div>

	<div id="content">
		<h2>开关上传页面测试</h2>
		<form id="form1" action="" method="post" enctype="multipart/form-data">
			<p>运用SWFUpload组件. 使用这种组件来实现上传队列和取消队列。</p>
			<div>
				<span id="spanButtonPlaceHolder"></span>
				<input id="sub" type="button" value="上传" onclick="swfu.startUpload();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;"/> 
				<input id="btnCancel"
					type="button" value="Cancel"
					onclick="swfu.cancelQueue();" disabled="disabled"
					style="margin-left: 2px; font-size: 8pt; height: 29px;" />
				<span id="tagSpan" style="margin-left: 2px; font-size: 8pt; height: 29px;" ></span>
			</div>
			<div>
				<span id="spanButtonPlaceHolder1"></span> 
				<input id="sub1" type="button" value="上传" onclick="swfu1.startUpload();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;"/>
				<input id="btnCancel1"
					type="button" value="Cancel"
					onclick="swfu1.cancelQueue();" disabled="disabled"
					style="margin-left: 2px; font-size: 8pt; height: 29px;" />
				<span id="tagSpan1" style="margin-left: 2px; font-size: 8pt; height: 29px;" ></span>
			</div>
		</form>
	</div>
</body>
</html>
